<!DOCTYPE HTML>
<html>
<head>
  <title>Touch events with vertical-rl writing mode</title>
  <meta name="viewport" content="width=device-width">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-actions.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>

  <script>
    setup({explicit_done: true});

    function onEvent(target, eventName, validator) {
      return new Promise((resolve) => {
        const listener = (event) => {
          validator(event);
          resolve();
        };
        target.addEventListener(eventName, listener, { once: true });
      });
    }

    async function run() {
      promise_test(async () => {
        const touchstart_promise = onEvent(document.documentElement,
                                           "touchstart", (event) => {
          assert_equals(event.changedTouches[0].clientX, 10,
            "touchstart clientX coordinates are correct in vertical-rl");
          assert_equals(event.changedTouches[0].clientY, 20,
            "touchstart clientX coordinates are correct in vertical-rl");
        });

        const click_promise = onEvent(document.documentElement,
                                      "click", (event) => {
          assert_equals(event.clientX, 10,
            "click clientX coordinates are correct in vertical-rl");
          assert_equals(event.clientY, 20,
            "click clientY coordinates are correct in vertical-rl");
        });

        const actions = new test_driver.Actions()
          .addPointer("touchPointer1", "touch")
          .pointerMove(10, 20)
          .pointerDown()
          .pointerUp();

        const actions_promise = actions.send();
        await Promise.all([actions_promise, click_promise, touchstart_promise]);
        done();
      }, "touch & click events in vertical-rl mode have correct coordinates");
    }
  </script>
  <style>
    body {
      margin: 0;
      writing-mode: vertical-rl;
    }
    .forcescroll {
      width: 5000px;
      height: 20px;
    }
  </style>
</head>
<body onload="run()">
  <div class="forcescroll"></div>
</body>
</html>